<template>
  <li>
    <div class="left">
      <input type="checkbox" :checked="todo.done" @change="update(todo.id)" />
      <span>{{ todo.name }}</span>
    </div>
    <div class="right">
      <button @click="delete1(todo.id)">删除</button>
    </div>
  </li>
</template>

<script>
export default {
  name: "todo-mainitem",
  props: ["todo", "checkTodo", "deleteTodo"],
  methods: {
    //点击单选按钮
    update(id) {
      //执行父元素的checkTodo方法
      this.checkTodo(id);
    },
    //点击删除按钮
    delete1(id) {
      //执行父元素的deleteTodo方法
      this.deleteTodo(id);
    },
  },
};
</script>

<style scoped>
li {
  height: 30px;
  border: 1px solid #000;
  cursor: pointer;
  line-height: 30px;
  margin-bottom: 4px;
  border-radius: 4px;
}
button {
  display: none;
  height: 30px;
}
li:hover button {
  display: block;
}
.left {
  float: left;
}
.right {
  float: right;
}
</style>